<template>
    <div class="leftContentOne">
        <!--第一部分-->
        <div class="province">
            <div class="provinceTitle">
                <!--宽窄竖线-->
                <div class="doubleLine lf">
                    <div class="wide lf"></div>
                    <div class="narrow lf"></div>
                </div>
                <!--浙江省-->
                <div class="zjProvince lf">
                    <div class="provinceName lf" @click="handleCityClick()">浙江省</div>
                    <div class="selectBtn lf" @click="handleCityClick()"></div>
                    <div class="shis" v-if="isShis">
                        <!-- <div class="cityies">
                            <router-link 
                                v-for="(item, index) of shisList" 
                                :key="index"
                                :to="'/city/' + item.name">
                                <div style="color:white" 
                                    :class="{'cityActive': isCityActive == index }" 
                                    :cityX="item.x"
                                    :cityY="item.y"
                                    @click="toThisCity(index)"  
                                    @mousemove="handleCityActive(index)">{{item.name}}</div>
                            </router-link>
                        </div> -->
                    <!-- <common-select  :options="options"></common-select> -->
                    <common-selecty></common-selecty>
                    </div>
                </div>
            </div>
            <div class="threeLine">
                <div class="firstLine lf"></div>
                <div class="secondLine lf"></div>
                <div class="thirdLine lf"></div>
            </div>
            <div class="twoCharts">
                <!--第一个图标-->
                <div class="firstChart lf">
                    <div class="chartTitle1">
                        <div class="littleLine lf"></div>
                        <div class="chartTitle lf">站点类型统计</div>
                    </div>
                    <div id="chart1"></div>
                </div>
                <!--第二个图表-->
                <div class="secondChart lf">
                    <div class="chartTitle2">
                        <div class="littleLine lf"></div>
                        <div class="chartTitle lf">站点评价统计</div>
                    </div>
                    <div id="chart2"></div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
let echarts = require('echarts');
import CommonSelect from "../../commons/CommonSelect"
import CommonSelecty from "../../commons/CommonSelecty"
import axios from 'axios'
export default {
    name: 'LeftContentOne',
    props:{
        chart1Data:Array,
        chart2Data:Array,
        option: Array
    },
    components:{
        CommonSelect,
        CommonSelecty
    },
    data(){
        return{
            isShis: false,
            isCityActive: 0,
            options: this.option,
            city: '杭州',
            shisList:[{name:'杭州',x:120.155161,y:30.236581},
                    {name:'宁波',x:121.541642,y:29.869131},
                    {name:'温州',x:120.705859,y:27.997299},
                    {name:'湖州',x:120.029758,y:30.869052},
                    {name:'嘉兴',x:120.770034,y:30.770431},
                    {name:'绍兴',x:120.562848,y:29.998565},
                    {name:'金华',x:119.641762,y:29.117773},
                    {name:'衢州',x:118.887113,y:28.93023},
                    {name:'舟山',x:122.170168,y:30.005134},
                    {name:'台州',x:121.427809,y:28.663282},
                    {name:'丽水',x:119.92771,y:28.473243}]
            
        }
    },
    mounted(){     
        this.getChart1DataInfo();
    },
    watch:{
        chart1Data: function(){
            this.getChart1DataInfo();
        },
        chart2Data: function(){
            this.getChart1DataInfo();
        },
    },
    methods: {
        stationNamesHide(){
             
        },
        handleChange(value,label) {
            // this.$store.commit('changeCityName', label[2])
            // // localStorage.setItem('cityX', this.shisList[index].x);
            // // localStorage.setItem('cityY', this.shisList[index].y);
            // this.$router.push('/cityW/' + label[2])
            console.log(label)
        },
        handleCityClick(){
            this.isShis = !this.isShis
            this.isStation = false
            this.isCounty = false
        },
        handleCityActive(index){
            this.isCityActive = index
        },
        toThisCity(index){
            //this.$comjs.onCenter(120.155161,30.236581,800000.0)//定位到该城市。
            this.$store.commit('changeCityName', this.shisList[index].name)
            localStorage.setItem('cityX', this.shisList[index].x);
            localStorage.setItem('cityY', this.shisList[index].y);
            this.isShis = false
        },
        getChart1DataInfo(){
            
            var  chart1Data = [];
            for(let i=0;i<this.chart1Data.length;i++){
                chart1Data[i]={};   
                chart1Data[i].name=this.chart1Data[i].StationType
                chart1Data[i].value=this.chart1Data[i].Count
            }
            var  chart2Data = [
                {value:0, name:'特别清新'},
                {value:0, name:'清新'},
                {value:0, name:'较清新'},
                {value:0, name:'一般'},
                {value:0, name:'不清新'}
            ];
            for(let j=0;j<this.chart2Data.length;j++){
                switch(this.chart2Data[j].DJ){
                    case '特别清新':{
                        chart2Data[0].value=this.chart2Data[j].Count;
                        break;
                    }
                    case '清新':{
                        chart2Data[1].value=this.chart2Data[j].Count;
                        break;
                    }
                    case '较清新':{
                        chart2Data[2].value=this.chart2Data[j].Count;
                        break;
                    }
                    case '一般':{
                        chart2Data[3].value=this.chart2Data[j].Count;
                        break;
                    }
                    case '不清新':{
                        chart2Data[4].value=this.chart2Data[j].Count;
                        break;
                    }
                }
            }
            let myChart1 = echarts.init(document.getElementById('chart1'));
            let myChart2 = echarts.init(document.getElementById('chart2'));       
            myChart1.setOption({
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                    position: [20, 20]
                },
                color:['#37A2DA', '#9FE6B8'],
                legend: {
                    itemHeight: 10,
                    itemWidth: 14,
                    orient: 'vertical',
                    x : '',
                    y : 'top',
                    data:[{name:'基本站',icon: 'rect'},{name:'功能站',icon:'rect'}],
                    textStyle:{
                        color:'#fff',
                        fontSize: 12
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'站点类型统计',
                        type:'pie',
                        radius : [10,'77%'] ,
                        hoverAnimation: false,
                        center : ['68%', '44%'],//圆心距离容器边缘的距离
                        roseType : 'radius',
                        label: {
                            normal: {
                                show: false,
                                position: 'inside'
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: chart1Data
                    }
                ]
            })
            let option2={
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color:[this.$comjs.color1, this.$comjs.color2, this.$comjs.color3, this.$comjs.color4, this.$comjs.color5],
                legend: {
                    orient: 'vertical',
                    itemWidth: 12,//图例大小
                    itemHeight: 8,
                    itemGap: 2,//图例之间的间距
                    left: -5,//图例距离容器距离
                    x : '',
                    y : 'top',
                    textStyle:{
                        color:'#fff',
                        fontSize: 12
                    },
                    data: [ { name:'特别清新', icon: 'rect'},
                            { name:'清新',     icon: 'rect'},
                            { name:'较清新',   icon: 'rect'},
                            { name:'一般',     icon: 'rect'},
                            { name:'不清新',   icon: 'rect'}]
                },
                calculable : true,
                series : [
                    {
                        name: '站点评价统计',
                        type: 'pie',
                        radius : [0,'79%'],
                        center: ['68%', '44%'],
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'inside'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:chart2Data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            myChart2.setOption(option2)
            
            if(document.documentElement.clientHeight <= 700){
                    option2.legend.itemWidth = 8;
                    option2.legend.itemHeight = 3;
                    option2.legend.itemGap=0;
            }else {
                    
                    option2.legend.itemWidth = 12;
                    option2.legend.itemHeight = 8;
                    option2.legend.itemGap=2;
            }
            
            window.addEventListener("resize", function () {   
                myChart1.resize();
                myChart2.resize();
            });   
        }
    }
}
</script>

<style lang="stylus" scoped>
    /* 样式穿透 */
    .leftContentOne >>> .littleLine
        width: .02rem
        height: .16rem
        background : #41E6FD
        margin-left: .11rem
        margin-right: .05rem
    .leftContentOne >>> .secondChart
        .littleLine
            margin-left: .06rem
    .leftContentOne >>> .chartTitle
            height: .16rem
            line-height : .16rem
    /* 所有样式 */
    .leftContentOne
        width: 4.03rem
        height: 20vh
        color: white
        background :rgba(7,23,42,0.49)
        .province
            height: 20vh
            .provinceTitle
                width: 100%
                height: 5vh
                padding-top: 1.8vh
                .doubleLine
                    width: .11rem
                    height: 1.9vh
                    .wide
                        width: .07rem
                        height: 1.9vh
                        background : #41E6FD
                    .narrow
                        width: .02rem
                        height: 1.9vh
                        background : #41E6FD
                        margin-left: .02rem
                .zjProvince
                    font-size: .18rem
                    font-family: FZZXHJW--GB1-0
                    margin-left: .12rem
                    position: relative
                    .provinceName
                        color: white
                        cursor :pointer
                        padding-right:.1rem
                    .selectBtn
                        width: 0
                        height: 0
                        border: 8px solid transparent;
                        border-top:  8px solid #41E6FD
                        margin-top: .05rem
                        cursor :pointer
                    .shis
                        min-height:18.9vh
                        position:absolute
                        left:0px
                        top:13px
                        z-index:100
                        cursor : pointer
                        display : flex
                        ul
                            width:135px
                            background: rgba(31,39,49,0.9)
                            border:1px solid #7d7d7d   
                            padding-top:5px
                            padding-bottom:5px 
                            li
                                font-size: 14px
                                color: white
                                height: 25px
                                line-height: 25px
                                text-indent: 5px
                                span 
                                    display: inline-block
                                    height: 25px
                                    line-height: 25px
                                span.iconfont
                                    float: right
                                    padding-right: 5px
                            li:hover
                                background:#2FDEFD
                                color: black
                        .cityNames
                            background: rgba(31,39,49,0.9)
                            min-height:18.9vh
                        .countyNames
                            background: rgba(31,39,49,0.9)
                            min-height:18.9vh
                        .stationNames
                            background: rgba(31,39,49,0.9)
                            min-height:18.9vh
                            

            .threeLine
                width: 100%
                height: .03rem
                .firstLine
                    width: 3.4rem
                    height: .03rem
                    background : #41E6FD
                .secondLine
                    width: .08rem
                    height: .03rem
                    background: rgba(255,255,255,.54)
                    margin-left: .06rem
                    margin-right: .04rem
                .thirdLine
                    width: .44rem
                    height: .03rem
                    background: #FFFFFF
            .twoCharts
                height:15vh
                .firstChart
                    width: 1.94rem
                    height: 15vh
                    padding-top: 2.3vh
                    .chartTitle1
                        width: 2.01rem
                        height: 3vh
                        font-size: .14rem
                    #chart1
                        width: 10.64875vw
                        height: 11.98vh
                .secondChart
                    width: 1.76rem
                    height: 15vh
                    padding-top: .25rem
                    margin-left: .20rem
                    .chartTitle2
                        width: 1.81rem
                        height: 3vh
                        font-size: .14rem
                    #chart2
                        width: 9.427vw
                        height: 11.98vh
                        
</style>


